<template>
  <div class="strut-div">
    <div class="card-item" style="height:336px;width:803px;">
      <p class="card-title">农业保险保额</p>
      <div class="card-div">
        <common-mix-chart ref="agriMixChart" :config="agriMixConfig"></common-mix-chart>
      </div>
    </div>
  </div>
</template>
<script>
  import CommonMixChart from "@/components/common/common-mix-chart.vue";
  import {
    agriculturalInsurance
  } from '@/network/tg-fake-data.js'
  export default {
    name: 'agriInsuChart',
    components: {
      CommonMixChart
    },
    data() {
      return {
        agriMixConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            legend: {
              data: [],
              textStyle: {
                fontSize: 14
              }
            },
            id: 'agriMixLine',
            xAxis: [],
            yAxis: [{
                type: 'value',
                min: 0,
                max: 400,
                name: '单位（亿元）',
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              },
              {
                type: 'value',
                min: 0,
                max: 40,
                name: '占比（百分比）',
                axisLabel: {
                  formatter: '{value}%'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              }
            ],
            series: [{
                name: '',
                type: 'bar',
                data: [],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#00FFED' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#00AEFF' // 100% 处的颜色
                  }],
                },
                label:{
                    show:true,
                    position:'top',
                    formatter:'{c}',
                    color:"#00FFED",
                    fontSize:14
                },
                barWidth: 22, //柱图宽度
              },
              {
                name: '',
                type: 'line',
                yAxisIndex: 1,
                data: [],
                itemStyle: {
                  color: '#F6FF00'
                },
                label:{
                    show:true,
                    position:'top',
                    formatter:'{c}%',
                    color:"#00FFED",
                    fontSize:14
                },
              }
            ]
          }
        },
      }
    },
    mounted() {
      this.agriMixConfig.option.legend.data = agriculturalInsurance.names;
      this.agriMixConfig.option.xAxis = agriculturalInsurance.xAxis;
      agriculturalInsurance.series.forEach((item, index) => {
        this.agriMixConfig.option.series[index].data = item;
        this.agriMixConfig.option.series[index].name = agriculturalInsurance.names[index];
      });

      this.$refs.agriMixChart.initChart()
    }
  }

</script>
<style lang="scss" scoped>
    .card-div {
        padding: 20px;
        box-sizing: border-box;
    }
</style>